/**
* @Author: 858834013@qq.com
* @Name: dateTimePickerSync
* @Date: 2022-05-14
* @Desc: 日期时间同步选择器
*/
<template>
	<div>
		<div @click="show=true">
			<slot></slot>
		</div>
		<u-datetime-picker :value="newdate" :minDate="start" :maxDate="end" @cancel="show=false" @confirm="getConfirm"
			:show="show" :mode="mode" :formatter="formatter">
		</u-datetime-picker>
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	export default {
		name: 'dateTimePickerSync',
		data() {
			return {
				show: false,
				start: new Date('2000').valueOf(),
				end: new Date().valueOf(),
				newdate: dayjs(this.date).valueOf(),
			};
		},
		watch: {
			date() {
				this.newdate = dayjs(this.date).valueOf()
			},
		},
		mounted() {
			this.newdate = dayjs(this.date).valueOf()
		},
		props: {
			date: {
				type: String,
				default () {
					return ''
				}
			},
			mode: {
				type: String,
				default () {
					return 'date'
				}
			},
		},

		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			getConfirm(e) {
				this.$emit("update:date", dayjs(e.value).format("YYYY-MM-DD"))
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
